const path=require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    mode:'development', //压缩还是不压缩
    devtool:'cheap-module-eval-source-map',
    entry: './src/index.js',
    devServer:{
        contentBase:'./dist',
        open:true
    },
    module:{
        //模块配置
        rules:[{
            test: /\.(jpg|png|gif)$/,
            use:{
                loader:'url-loader',
                options:{
                    outputPath:'images/',//设置打包后的文件存放的位置
                    name:'[name].[ext]', //打包图片不修改名称，根据占位符修改名称
                    limit:2048 //图片大于2kb时通过file-loader打包，小于2kb时通过url-loader打包到js中
                }
            }
        },{
            //css文件打包
            test: /\.css$/,
            use:[
                'style-loader',
                {
                    loader:'css-loader'
                }
            ]
        }]
    },
    plugins:[new HtmlWebpackPlugin({
        template:'src/index.html'
    }),new CleanWebpackPlugin(['dist'])],
    output:{
        filename:'dist.js',
        path:path.resolve(__dirname,'dist')
    }
}